import React from 'react'
import "./less/login.css"
import logoimg from '../assets/img/login.jpg'

import { Form, Input, Button,message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {Link,useNavigate} from 'react-router-dom'

import {LoginApi} from '../request/api'

export default function Login() {
  const navigate = useNavigate()
  const onFinish = (values) => {
    LoginApi({username:values.username,password:values.password}).then(res=>{
      // console.log(res);
      if(res.errCode===0){
        // 登入成功之后
        message.success(res.message)
        // 存储数据
        localStorage.setItem('avatar',res.data.avatar)
        localStorage.setItem('cms-token',res.data['cms-token'])
        localStorage.setItem('editable',res.data.editable)
        localStorage.setItem('player',res.data.player)
        localStorage.setItem('username',res.data.username)
        // 跳转根目录
        setTimeout(()=>navigate('/'),1500)

      }else{
        message.error(res.message)
      }
    })
  };

 
  return (
   <div className="login">
      <div className='login_box'>
        <img src={logoimg} alt="" />
       <Form
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入用户名',
          },
        ]}
      >
        <Input size='large' prefix={<UserOutlined className="site-form-item-icon" />}  placeholder='请输入用户名' />
      </Form.Item>

      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input.Password size='large' prefix={<LockOutlined className="site-form-item-icon" />}  placeholder='请输入密码' />
      </Form.Item>
      <Form.Item>
        <Link to='/register'>还没有账号？立即注册</Link>
      </Form.Item>

      <Form.Item>
        <Button size="large" type="primary" htmlType="submit" block>登录</Button>
      </Form.Item>
    </Form>
    </div>
   </div>
  )
}
